import CustomButton from "../Common/CustomButton";
import { GlobalData } from "../Common/GlobalData";
import { SceneGame } from "../SceneGame";
import BaseSprite from "./BaseSprite";

const { ccclass, property } = cc._decorator;

export enum EViewAnimation {
	Pop,		// 弹出
	Fade,		// 渐显渐隐
}

@ccclass
export default class BaseView extends BaseSprite {

	@property({ type: cc.Node, tooltip: "top" })
    protected top: cc.Node = null;
    @property({ type: cc.Node, tooltip: "bottom" })
    protected bottom: cc.Node = null;

	@property({ tooltip: "点击周围是否关闭" })
	private isTouchAround: boolean = false;

	@property({ tooltip: "弹出类型\n0.弹出\n1.渐显渐隐" })
	private animationType: EViewAnimation = EViewAnimation.Pop;

	public root: cc.Node = null;
	public mask: cc.Node = null;
	public isHasChild: boolean = false;

	public prepareData = null;
	protected prepare(data: any) {
		// console.log("BaseView.prepare()===>data:", data);
		this.prepareData = data;
	}

	protected onLoad() {
		super.onLoad();
		// this.mask = SceneGame.instance.getViewMask();
		this.mask = cc.find('mask', this.node);
		this.root = cc.find('root', this.node);
		this.root = this.root || this.node;
		this.showViewAction();
		this.maskAddClose();
		this.adaper();
	}

	protected adaper() {
		if (GlobalData.fixType == '宽适配') {
            if (this.top) {
                this.top.y = GlobalData.stage_height / 2;
            }
    
            if (this.bottom) {
                this.bottom.y = -GlobalData.stage_height / 2;
            } 
        }
	}

	private maskAddClose() {
		// 背景添加点击
		let comp = this.mask?.getComponent(CustomButton);
		if (!comp && this.isTouchAround) {
			// 添加按钮
			comp = this.mask.addComponent(CustomButton);
			// 添加事件
			const clickEventHandler = new cc.Component.EventHandler();
			clickEventHandler.target = this.node;
			clickEventHandler.component = "BaseView";
			clickEventHandler.handler = "onCloseBtnClicked";
			clickEventHandler.customEventData = "";
			comp.getComponent(cc.Button).clickEvents.push(clickEventHandler);
		} else {
			comp && this.mask.removeComponent(comp);
		}
	}

	public showViewAction() {
		switch (this.animationType) {
			case EViewAnimation.Pop:
				{
					if (this.mask) {
						cc.tween(this.mask).to(0, { opacity: 0 }).to(0.3, { opacity: GlobalData.maskOpacity }).start();
					}

					if (this.root) {
						cc.tween(this.root).to(0, { scale: 0 }).to(0.3, { scale: 1 }, cc.easeBackOut()).call(() => {
							SceneGame.instance.showTopUI();
						}).start();
					}
				}
				break;
			case EViewAnimation.Fade:
				{
					if (this.mask) {
						cc.tween(this.mask).to(0, { opacity: 0 }).to(0, { opacity: 50 }).to(0.3, { opacity: GlobalData.maskOpacity }).start();
					}

					if (this.root) {
						cc.tween(this.root).to(0, { opacity: 0 }).to(0, { opacity: 50 }).to(0.3, { opacity: 255 }).call(() => {
							SceneGame.instance.showTopUI();
						}).start();
					}
				}
				break;
		}
	}

	public hideViewAction(callback?: Function) {
		switch (this.animationType) {
			case EViewAnimation.Pop:
				{
					if (this.root) {
						cc.tween(this.root).sequence(
							cc.spawn(
								cc.scaleTo(0.3, 0.4).easing(cc.easeBackIn()),
								cc.fadeOut(0.3),
							),
							cc.callFunc(() => {
								SceneGame.instance.showTopUI();
								this.node.destroy();
								callback && callback();
								callback = null;
							}),
						).start();
					}

					if (this.mask) {
						this.mask.stopAllActions();
						cc.tween(this.mask).to(0.3, { opacity: 50 }).call(() => {
							this.mask.active = false;
						}).start();
					}
				}
				break;
			case EViewAnimation.Fade:
				{
					if (this.root) {
						cc.tween(this.root).to(0.3, { opacity: 0 }).call(() => {
							SceneGame.instance.showTopUI();
							this.node.destroy();
							callback && callback();
							callback = null;
						}).start();
					}

					if (this.mask) {
						this.mask.stopAllActions();
						cc.tween(this.mask).to(0.3, { opacity: 50 }).call(() => {
							this.mask.active = false;
						}).start();
					}
				}
				break;
		}
	}

	public onCloseChild() { }
	public onCloseClicked() {
		if (this.isHasChild) {
			this.onCloseChild();
		} else {
			this.hideViewAction();
		}
	}
}